<template>
  <div id="app">
    <!-- <transition :name="viewTransition" :css="!!direction">
      <router-view ref="bodyContent" :key="$route.fullPath" class="bodyBox" />
    </transition> -->
    <keep-alive :max="25" :include="includedComponents">
      <router-view ref="bodyContent" :key="$route.fullPath" class="bodyBox" />
    </keep-alive>
    <!-- 开发调试插件 -->
    <Vconsole />
  </div>
</template>
<script>
import { mapActions, mapGetters, mapMutations } from 'vuex'
import Vconsole from '@/components/Common/Vconsole.vue'
export default {
  name: 'App',
  components: { Vconsole },
  data() {
    return {

    }
  },
  computed: {
    ...mapGetters(['direction', 'includedComponents', 'excludedComponents']),
    viewTransition() {
      if (!this.direction) return ''
      return 'app-pop-' + (this.direction === 'forward' ? 'in' : 'out')
    },
    showTabBar() {
      return this.$route.meta.showTabBar || false
    },
    title() {
      return '在App.vue中computed:title()中修改'
    },
    contentHeight() {
      if (this.showTabBar) {
        return 'calc(100% - 46px - 60px)'
      }
      return 'calc(100% - 56px)'
    }
  },
  watch: {
    $route(to, from) {
      let statusBarBgColor = (to.meta && to.meta.statusBarBgColor) || '#FAFBFE'
      const isToTop = to.meta.isImmerse === true
      if (isToTop) {
        statusBarBgColor = '' // 吸顶状态栏背景色为空
      }
      let statusBarType = statusBarBgColor === '#FFFFFF' || statusBarBgColor === '#FAFBFE' ? 1 : 0
      if (to.meta.statusBarType === 0 || to.meta.statusBarType === 1) {
        statusBarType = to.meta.statusBarType
      }
      // 设置原生状态栏风格（字体色，背景色,是否吸顶）
      this.$nativeHandler('setupStatusBarStyle', {
        statusBarType, // 1: 黑色  0：白色
        isToTop, // 是否需要顶部距离(true:吸顶)
        statusBarBgColor // 状态栏颜色
      }).then(res => {
        this.$store.commit(
          'updateStatusBarHeight',
          res.statusBarHeight || 0
        )
      })
    }
  },
  async created() {
    this.nativeHandlerApp()
    const userInfo = await this.$nativeHandler('getBaseInfo', '')
    this.updateUserInfo(userInfo)
  },
  mounted() {
    // 发布到移动平台后，需下行代码

  },
  methods: {
    ...mapMutations(['updateUserInfo']),
    headerTransition() {
      return this.direction === 'forward'
        ? 'header-fade-in-right'
        : 'header-fade-in-left'
    },
    pageBack() {
      // 跳转时带isHome=true参数，就可以立即返回原生
      if (this.$route.query.isHome) {
        this.backOrigin()
        return
      }
      switch (this.$route.path) {
        case '/':
          this.backOrigin()
          break
        default:
          this.$router ? this.$router.back() : this.backOrigin()
          break
      }
    },
    goHome() {
      this.$router.push('/')
    },
    backOrigin() {
      this.$nativeHandler('closeWeb', '')
    },
    nativeHandlerApp() {
      this.$nativeHandler('setStatusBarColor', { 'color': '#16BC83' })

      this.$nativeHandler('isQuanUBase').then(res => {
        this.$store.state.app.isOnQuanUBase = res
      }).catch(err => {
        this.$store.state.app.isOnQuanUBase = false
        this.$toast.fail('请在全友统一移动应用平台中使用' + err)
        this.$router.push('/404')
      })
    }
  }
}
</script>
<style lang="less">
#app {
  font-family: PingFangSC-Regular, PingFang SC;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
  position: relative;
}

html,
body {
  height: 100%;
  width: 100%;
  background-color: @defualt-bg;
}
* {
  margin: 0;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}

/* 主界面动画 */
.app-pop-out-enter-active,
.app-pop-out-leave-active,
.app-pop-in-enter-active,
.app-pop-in-leave-active {
  will-change: transform;
  transition: all 150ms;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  perspective: 1000;
}

.app-pop-out-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.app-pop-out-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.app-pop-in-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.app-pop-in-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
/* 其他 */
.bodyBox {
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
}

.bodyBox /deep/ .van-button--primary{
  background-color: #16BC83 !important;
  border-color: #16BC83 !important;
}
</style>
